<section>
  <d-splitter class="splitter-border" [orientation]="orientation" [splitBarSize]="splitBarSize" [showCollapseButton]="true">
    <d-splitter-pane
      [shrink]="true"
      [size]="size"
      [minSize]="minSize"
      [maxSize]="maxSize"
      [collapsed]="collapsed"
      [shrinkWidth]="40"
      [collapsible]="true"
      (sizeChange)="sizeChange($event)"
      (collapsedChange)="collapsedChange($event)"
      (shrinkStatusChange)="paneShrinkStatus($event)"
    >
      <d-accordion *ngIf="!isPaneShrink" [data]="menu" [itemTemplate]="itemtemplate" [menuItemTemplate]="menutemplate"></d-accordion>
      <ng-template #menutemplate let-item="item">
        <i class="title-icon {{ item.icon }}"></i><span class="title">{{ item.title }}</span>
      </ng-template>
      <ng-template #itemtemplate let-item="item">
        <i class="title-icon {{ item.icon }}"></i><span class="title">{{ item.title }}</span>
      </ng-template>

      <ul style="padding: 8px 0" *ngIf="isPaneShrink">
        <li
          dTooltip
          [content]="hoverCard[index]"
          [position]="'right'"
          *ngFor="let item of menu; let index = index"
          class="title-icon {{ item.icon ? item.icon : 'icon-dot-status' }}"
          [ngClass]="{ active: item.active || isChildrenActive(item) }"
          (click)="selectItem(item)"
        ></li>
      </ul>
    </d-splitter-pane>

    <d-splitter-pane minSize="15%">
      <div class="pane-content">
        <h2>Right</h2>
        <div>Content</div>
      </div>
    </d-splitter-pane>
  </d-splitter>
</section>
